<template>
  <div class="info" v-if="info">
    <div class="head">
      <div class="title">{{ info.questionnaireTitle }}</div>
      <div class="info_type" @click="tofff">调查问卷</div>
      <div class="line"></div>
    </div>

    <div class="questionnaire_list">
      <div :class="['list_item', item.error ? 'error' : '']" :id="`item_${index}`"
        v-for="(item, index) in info?.questionList">
        <div class="item_title">
          <span v-if="item.isRequired == 1" class="is_required" style="color: red">*</span>
          <span>{{ index + 1 }}.{{ item.questionTitle }}</span>
        </div>
        <div v-if="item.questionType == 1">
          <van-radio-group v-model="item.optionId" shape="dot" @change="item.error = null">
            <van-radio :name="itg.questionOptionId" v-for="itg in item.questionOptionList">{{ itg.optionContent
              }}</van-radio>
          </van-radio-group>
        </div>
        <div v-if="item.questionType == 2">
          <van-checkbox-group v-model="item.optionId" shape="square" @change="item.error = null">
            <van-checkbox :name="itg.questionOptionId" v-for="itg in item.questionOptionList">{{ itg.optionContent
              }}</van-checkbox>
          </van-checkbox-group>
        </div>
        <div v-if="item.questionType == 3">
          <van-field v-model="item.text" placeholder="请填写" @change="item.error = null" maxlength="50" />
        </div>
        <div v-if="item.questionType == 4">
          <van-field :model-value="item.text" maxlength="50" placeholder="请选择时间" @click="showSelectTime(item)" />
          <van-popup v-model:show="item.showTime" position="bottom">
            <van-date-picker @confirm="confirmTime(item)" @cancel="item.showTime = false" v-model="item.backText"
              title="选择日期" :min-date="minDate" :max-date="maxDate" :columns-type="columnsType" /></van-popup>
        </div>
      </div>
    </div>

    <div class="save_btn" @click="save">
      提交
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { queryQuestionnaireDetails, submitQuestionnaire } from "@/api/index";
import { useRoute } from "vue-router";
import useUserStore from "../../store/modules/user";
import { showConfirmDialog  } from 'vant';
import { useRouter } from "vue-router";
let route = useRoute();
let id = route.params.id;
let minDate = new Date("1970/01/01");
let maxDate = new Date("2100/01/01");
let user = useUserStore()
let info = ref(null);
useRouter
let router = useRouter()
const columnsType = ["year", "month", "day"];
let nowDay = new Date();
let defaultTime = [
  nowDay.getFullYear(),
  nowDay.getMonth() + 1,
  nowDay.getDate(),
];
function getInfo() {
  queryQuestionnaireDetails(id).then((res) => {
    info.value = res.data;
  });
}
getInfo();
function showSelectTime(item) {
  if (item.text) {
    item.backText = item.text.split("-");
  } else {
    item.backText = defaultTime;
  }
  item.showTime = true;
}
function confirmTime(item) {
  if (item.backText) {
    item.text = item.backText.join("-");
  }
  item.error = null
  item.showTime = false;
}
function tofff() {
  document
    .getElementById(`item_2`)
    .scrollIntoView({ behavior: "smooth", block: "start" });
}
let token = computed(()=>user.$state.token)
function save() {
  if (!token) {
    user.isShow(true)
    return
  }
  let backInfo = JSON.parse(JSON.stringify(info.value))
  let data = {
    questionnaireId: info.value.id,
    questionList: []
  }
  let error = false
  backInfo.questionList.forEach((item, index) => {
    if (item.isRequired == 1 && (!item.optionId && !item.text)) {
      if (!error) {
        document
          .getElementById(`item_${index}`)
          .scrollIntoView({ behavior: "smooth", block: "start" });
      }
      error = true
      info.value.questionList[index].error = true
    }
    if (item.questionType == 1) {
      item.optionId = [item.optionId]
    }
    data.questionList.push({
      "questionId": item.questionId,
      "questionTitle": item.questionTitle,
      "questionType": item.questionType,
      "isRequired": item.isRequired,
      "optionId": item.optionId,
      "text": item.text
    })
  })
  if (data.questionList.length == 0 || error) {
    return
  }
  submitQuestionnaire(data).then(res => {
    showConfirmDialog({
      title: '提示',
      message:'调查问卷提交成功',
      confirmButtonText:'查看提交列表',
      cancelButtonText:'返回服务'

    })
      .then(() => {
        router.push('/queryList')
      })
      .catch(() => {
        router.push('/server')
      });
  })
}
</script>

<style scoped lang="scss">
.info {
  padding: 16px 0 100px 0;
}

.title {
  font-weight: bold;
  color: #333;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  color: #1e80ff;
}

.info_type {
  font-size: 15px;
  color: #666;
}

.line {
  border-bottom: 1px dashed #ccc;
  margin: 14px 0;
}

.head {
  padding: 0 10px;
}

.list_item {
  border: 1px dashed transparent;
  margin-bottom: 10px;
  padding: 10px;

  &.error {
    border: 1px dashed red;
  }

  .is_required {
    transform: translateY(3px);
    margin-right: 4px;
    display: inline-block;
  }

  .item_title {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

.save_btn {
  width: 200px;
  height: 40px;
  background: #1e80ff;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-radius: 8px;

  &:active {
    background: #1989fa;
  }
}
</style>
